<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--<div id="app">-->
<!--  <input type="text" name="username" v-model="username">-->
<!--  <button onclick="getData()">获取数据</button>-->
<!--</div>-->
<div id="app">
  <input type="text"  v-model="username">
  <button @click="getData()">获取数据</button>
  <h2>{{ username }}</h2>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  // function getData(){
  //   let data=document.querySelector("input[name='username']")
  //   let value=data.value;
  //   console.log(value)
  // }

  // Vue.createApp({
  //   data(){
  //     return {username:"lty"}
  //   },
  //   methods:{
  //     getData() {
  //       console.log(this.username)
  //     }
  //   }
  // }).mount('#app');

  const {createApp,ref}=Vue;

  createApp({
    setup(){
      const username=ref("lty");
      const getData=()=>{
        console.log(username.value)
      }
      return {username,getData}
    }
  }).mount('#app');
</script>
</body>
</html>